<template>
  <div class="product-container">
    <van-row>
      <van-col span="12">
        <div class="product-item">
          <div class="product-img">
            <img src="../common/images/product.png"/>
          </div>
          <div class="product-desc">
            <span>2018新款羊毛大衣黑色排扣百搭秋冬款中长款翻领时尚</span>
            <div class="product-desc-font">
              <van-col span="12">
                <div class="product-left">
                  <span class="kuan">200人付款</span>
                </div>
              </van-col>
              <van-col span="12">
                <div class="product-right">
                  <span class="price"><span>￥</span>9.9</span>
                </div>
              </van-col>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="product-item">
          <div class="product-img">
            <img src="../common/images/product.png"/>
          </div>
          <div class="product-desc">
            <span>2018新款羊毛大衣黑色排扣百搭秋冬款中长款翻领时尚</span>
            <div class="product-desc-font">
              <van-col span="12">
                <div class="product-left">
                  <span class="kuan">200人付款</span>
                </div>
              </van-col>
              <van-col span="12">
                <div class="product-right">
                  <span class="price"><span>￥</span>9.9</span>
                </div>
              </van-col>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="product-item">
          <div class="product-img">
            <img src="../common/images/product.png"/>
          </div>
          <div class="product-desc">
            <span>2018新款羊毛大衣黑色排扣百搭秋冬款中长款翻领时尚</span>
            <div class="product-desc-font">
              <van-col span="12">
                <div class="product-left">
                  <span class="kuan">200人付款</span>
                </div>
              </van-col>
              <van-col span="12">
                <div class="product-right">
                  <span class="price"><span>￥</span>9.9</span>
                </div>
              </van-col>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="product-item">
          <div class="product-img">
            <img src="../common/images/product.png"/>
          </div>
          <div class="product-desc">
            <span>2018新款羊毛大衣黑色排扣百搭秋冬款中长款翻领时尚</span>
            <div class="product-desc-font">
              <van-col span="12">
                <div class="product-left">
                  <span class="kuan">200人付款</span>
                </div>
              </van-col>
              <van-col span="12">
                <div class="product-right">
                  <span class="price"><span>￥</span>9.9</span>
                </div>
              </van-col>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="product-item">
          <div class="product-img">
            <img src="../common/images/product.png"/>
          </div>
          <div class="product-desc">
            <span>2018新款羊毛大衣黑色排扣百搭秋冬款中长款翻领时尚</span>
            <div class="product-desc-font">
              <van-col span="12">
                <div class="product-left">
                  <span class="kuan">200人付款</span>
                </div>
              </van-col>
              <van-col span="12">
                <div class="product-right">
                  <span class="price"><span>￥</span>9.9</span>
                </div>
              </van-col>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="product-item">
          <div class="product-img">
            <img src="../common/images/product.png"/>
          </div>
          <div class="product-desc">
            <span>2018新款羊毛大衣黑色排扣百搭秋冬款中长款翻领时尚</span>
            <div class="product-desc-font">
              <van-col span="12">
                <div class="product-left">
                  <span class="kuan">200人付款</span>
                </div>
              </van-col>
              <van-col span="12">
                <div class="product-right">
                  <span class="price"><span>￥</span>9.9</span>
                </div>
              </van-col>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  export default {
    name: 'product-list'
  }
</script>

<style scoped>
  .product-container{background:#fff;margin-bottom: 148rpx;text-align: center;}
  .product-item{height: 330rpx;background-color: #ffffff;padding: 20rpx;}
  .product-item:nth-child(2n+1){border-top: 1rpx solid #e1e1e1;border-bottom: 1rpx solid #e1e1e1;border-right: 1rpx solid #e1e1e1;}
  .product-item>.product-img{width: 100%;height: 220rpx;background-color: #ffffff;}
  .product-item>.product-img>img{width: 100%;height: 100%;}
  .product-item>.product-desc>span{display:block;width: 338rpx;font-size: 24rpx;line-height: 36rpx;letter-spacing: 1rpx;color: #000000;text-align: left;margin: 0 auto;}
  .product-item>.product-desc>.product-desc-font{width: 338rpx;margin: 0 auto;}
  .product-right{text-align: right;}
  .product-left{text-align: left;}
  .kuan{text-align: left;font-size: 22rpx;color: #959595;}
  .price>span{font-size: 20rpx;color: #f36579;}
  .price{font-size: 30rpx;color: #f36579;text-align: right;}
</style>
